<template >
	<div class="contain" >
		<div class="contain-header">
			<el-breadcrumb  separator="/">
				<el-breadcrumb-item>商品管理</el-breadcrumb-item>
				<el-breadcrumb-item>商品属性组</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="commodityAttribute-body">
			<div class="body-header">
				<el-input placeholder="请输入内容" size="small" v-model.trim="value" clearable @clear="clear" style="width: 300px;margin-right: 10px" class="input-with-select">
					<el-button slot="append" icon="el-icon-search" size="small" @click="getPage(value)">搜 索</el-button>
				</el-input>
				<el-button type="primary" icon="el-icon-plus" size="small" @click="addDialog = true">添 加</el-button>
			</div>
			<div class="body-table">
				<el-table
						:data="tableData"
						stripe
						style="width: 100%">
					<el-table-column
							align="center"
							prop="name"
							label="属性组名称">
					</el-table-column>
					<el-table-column
							align="center"
							prop="containsChoose"
							label="包含属性">
						
					</el-table-column>
					<el-table-column
							align="center"
							label="操作">
						<template slot-scope="scope">
							<el-button type="warning " size="mini" @click="openEdit(scope.row.id)">编 辑</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
<!--			<div class="body-page">-->
<!--				<el-pagination-->
<!--						background-->
<!--						layout="prev, pager, next"-->
<!--						:page-size="5"-->
<!--						:total="1000">-->
<!--				</el-pagination>-->
<!--			</div>-->
		</div>
		
		<el-dialog title="新增属性" :visible.sync="addDialog" center width="30%">
			<el-form  label-width="80px" >
				<el-form-item label="属性名称">
					<el-input  placeholder="请输入属性名称" v-model.trim="addData.name"></el-input>
				</el-form-item>
				<el-form-item label="包含属性" >
					<el-input  type="textarea"
							   :rows="2"
							   v-model.trim="addData.containsChoose"
							   placeholder="请输入属性(请用 / 分割)  例:红色/蓝色/绿色"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addDialog = false" size="small">取 消</el-button>
				<el-button type="primary" @click="sumbitAdd" size="small">确 定</el-button>
			</div>
		</el-dialog>
		
		<el-dialog title="编辑属性" :visible.sync="editDialog" center width="30%">
			<el-form  label-width="80px" >
				<el-form-item label="属性名称">
					<el-input  placeholder="请输入属性名称" v-model.trim="editData.name"></el-input>
				</el-form-item>
				<el-form-item label="包含属性" >
					<el-input  type="textarea"
							   :rows="2"
							   v-model.trim="editData.containsChoose"
							   placeholder="请输入属性(请用 / 分割)  例:红色/蓝色/绿色"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="editDialog = false" size="small">取 消</el-button>
				<el-button type="primary" @click="sumbitEdit" size="small">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template >

<script >
	import {attribute, addAttribute, attributeSee , editAttribute} from "../api/commodityModules";

    export default {
        name: "commodityAttribute",
        data(){
            return{
                addDialog:false,
				editDialog:false,
                value:'',
                tableData: [],
				addData:{
                    containsChoose: '',
                    name: ''
				},
				editData:{}
            }
        },
		mounted() {
            this.getPage('')
        },
        methods:{
            //列表
            async getPage(name){
                const { data } = await attribute(name)
				if (data.code === 200){
                   this.tableData = data.data
				}
			},
			//清除
            clear(){
                this.getPage('')
			},
			//新增
            async sumbitAdd(){
                for (let key in this.addData) {
                    if(!this.addData[key]){
                        return this.$message.error('请将信息填写完整!')
                    }
                }
                const  { data } = await  addAttribute(this.addData)
				if (data.code === 200) {
				    this.$message.success(data.message)
					this.addData = {}
					this.addDialog = false
					await this.getPage('')
				}
			},
             async openEdit(id){
                const { data } = await attributeSee(id)
				 if (data.code === 200) {
				     this.editDialog = true
					 this.editData = data.data
				 }
			},
            async sumbitEdit(){
                for (let key in this.editData) {
                    if(!this.editData[key]){
                        return this.$message.error('请将信息填写完整!')
                    }
                }
                const  { data } = await  editAttribute(this.editData)
                if (data.code === 200) {
                    this.$message.success(data.message)
                    this.editDialog = false
                    await this.getPage('')
                }
			}
		}
    }
</script >

<style scoped lang="less">
	.commodityAttribute-body{
		width: 100%;
		height: calc(100% - 50px);
		background-color: #ffffff;
		.body-header{
			width: 100%;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
		.body-table {
			width: 100%;
			max-height: calc(100% - 100px);
		}
		.body-page{
			width: 100%;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style >
